<!--
 * @Author: 刘十三
 * @Date: 2024-02-23 10:22:59
 * @LastEditors: 刘十三
 * @LastEditTime: 2024-03-07 15:06:33
 * @FilePath: \FJ-dev-1.3.1\dev\pages\certificate\processing\processingList.vue
 * @Description: 许可办理查询
-->

<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :is-white="false" :title="navTitle" :custom-back="goBack" style="z-index: 99999">
      <u-icon name="search" color="#FFF" size="38" style="margin: 0 24rpx 0 6rpx" @tap="openSearch"></u-icon>
    </theme-navbar>
    <!-- #ifdef H5-WECHAT || H5-EMP -->
		<fab-button :content="fContent" @fabtrigger="fabtrigger" />
		<!-- #endif -->
    <!-- #endif -->
    <view class="tab-content-lay" :style="{'top': isHideNav ? 0 : '44px'}">
      <view class="tab-lay">
        <u-tabs :is-scroll="false" :list="tabList" :current="currentTab" @change="tabChange"></u-tabs>
      </view>
		</view>
    <!-- 列表 -->
    <view class="content">
      <me-table :i="0" :index="0" :top="100" :height="getListViewHeight()" :load-data="loadData" :init-load="false" ref="mescrollItem0" v-if="show">
        <template slot-scope="d">
          <view style="margin-bottom: 20rpx;">
            <processingItem class="n-lay" :seal-info="d.data" :type="serachForm.isWithdraw" />
          </view>
        </template>
      </me-table>
    </view>
    <!-- 搜索条件 -->
    <u-popup v-model="searchVisable" width="80%" mode="right">
      <view class="cearch_title">查询条件</view>
      <view class="cearch_content" style="padding: 80rpx 32rpx 120rpx">
        <u-form :model="serachForm" label-position="top" label-width="auto" ref="uForm" :safe-area-inset-bottom="true">
          <template v-if="searchVisable">
            <u-form-item label="办理类型:" prop="processType" right-icon="arrow-right">
             <u-input placeholder="请选择" :border="false" v-model="applyTypesName" disabled @tap="clickHandleTypeMask" />
            </u-form-item>
            <u-form-item label="申请编号:" prop="applyCode">
              <u-input placeholder="请输入" :border="false" v-model="serachForm.applyCode" />
            </u-form-item>
            <u-form-item label="申请日期:" >
               <u-input placeholder="请选择申请日期" :disabled="true" v-model="applyDate" @click="licnDate=true" />
            </u-form-item>
            <u-form-item label="许可证号:" prop="licNo">
              <u-input placeholder="请输入" :border="false" v-model="serachForm.licNo" />
            </u-form-item>
            <u-form-item label="企业名称:" prop="companyName">
              <u-input placeholder="请输入" :border="false" v-model="serachForm.companyName" />
            </u-form-item>
            <u-form-item label="负责人(经营者)姓名:" prop="managerName" :border-bottom="false">
              <u-input placeholder="请输入" :border="false" v-model="serachForm.managerName" />
            </u-form-item>
						<u-form-item label="经营地址:" prop="companyAddr" :border-bottom="false">
						  <u-input placeholder="请输入经营地址" :border="false" v-model="serachForm.companyAddr" />
						</u-form-item>
          </template>
        </u-form>
      </view>
      <view class="submit-btns btn-other-cls">
        <u-button plain class="del" type="primary" @tap="handleRest">重置</u-button>
        <u-button class="mit" type="primary" @tap="selectChange">确定</u-button>
      </view>
    </u-popup>
    <!-- 反馈来源 -->
    <u-popup mode="bottom" height="60%" v-model="applyTypesVisily" @touchmove.prevent>
      <multi-select :options="applyTypesOptions" @select="applyTypesConfirm"></multi-select>
    </u-popup>
		<u-calendar mode="range" max-date="2099-12-31" v-model="licnDate" @change="handlerLicnDate"></u-calendar>
  </view>
</template>

<script>
import { ZDate } from "@/components";
import meTable from "@/components/me-table.vue";
import fabButton from "@/components/uni-fab.vue";
import processingItem from "./components/processingItem.vue";
import MescrollMoreMixin from "@/components/mescroll-uni/mixins/mescroll-more.js";
import certificateService from "@/service/certificate/certificate.service.js";
import multiSelect from '@/components/multi-select.vue';

export default {
  components: {
    ZDate,
    meTable,
    fabButton,
    multiSelect,
    processingItem,
  },
  mixins: [MescrollMoreMixin],
  data() {
    return {
      show: true,
      searchVisable: false,
			applyTypesName:"",
      applyTypesOptions: [],
      applyTypesVisily: false,
			licnDate: false,
			applyDate:"",
      serachForm: {
				applyCode: "",
				licNo: "",
				companyName: "",
				managerName: "",
				applyTypes: "01,02,03,04,05,06,07",
				applyDateEnd: "",
				applyDateEnd: "",
				isWithdraw:0,// 1：查询已撤回的，0：查询可撤回数据
				handleMainTypes:'02',//办理流程状态
				companyAddr:"",
				page: 1,
				limit: 10,
      },
      fContent: [
        {
          iconPath: require("@/static/search.png"),
          selectedIconPath: require("@/static/search.png"),
          text: "搜索",
          active: false,
        },
      ],
			tabList: [{
					id: 0,
					name: '待撤回',
					text: '待撤回',
				},
				{
					id: 1,
					name: '已撤回',
					text: '已撤回',
				},
			],
			currentTab: 0,
    };
  },
  mounted() {
    this.setRightBtns();
    this.applyTypesOptions = this.$store.state.dicts['L_APPLY_TYPE']?.map(p => {
      return {
        uid: p.bcbCode,
        name: p.bcbName
      }
    });
  },
  methods: {
		getListViewHeight() {
			let p = this.$u.sys().windowHeight  - 38 - uni.upx2px(10) - this.$u.sys().statusBarHeight + 'px';
			// #ifdef H5-DINGDING || H5-WECHAT
			p = this.$u.sys().windowHeight - uni.upx2px(10) - 38 - this.$u.sys().statusBarHeight + 'px';
			// #endif
			return p;
		},
    clickHandleTypeMask() {
      this.applyTypesVisily = true;
    },
    applyTypesConfirm(data) {
      this.applyTypesName = data.map(item => item.name).join(',');
      this.serachForm.applyTypes = data.map(item => item.uid).join(',');
      this.applyTypesVisily = false;
    },
    setRightBtns() {
      // #ifdef H5-DINGDING
      this.$deviceApi.setRight('搜索', () => {
        this.openSearch();
        this.setRightBtns();
      }, true, true);
      // #endif
    },
    fabtrigger(btn) {
      if (btn.index == 0) {
        this.openSearch();
      }
    },
    openSearch() {
      this.searchVisable = true;
    },
    selectChange() {
      this.searchVisable = false;
      this.handleReferList();
    },
    handleRest() {
			// 重置
			this.applyDate = "";
			this.applyTypesName = "";
			let keys = Object.keys(this.serachForm);
			delete keys['isWithdraw']
			delete keys['handleMainTypes'];
			for(let key of keys) {
				this.serachForm[key] = ""
			}
      this.serachForm.applyTypes = "01,02,03,04,05,06,07";
    },
    loadData(pager) {
      let self = this;
      this.serachForm.page = pager.num;
      this.serachForm.limit = pager.size;
      return new Promise((resolve) => {
        certificateService.getMyHandleList(self.serachForm)
          .then((res) => {
            if (res.success) {
              resolve({
                data: res.data,
                count: res.count,
              });
            } else {
              self.$modal.alert(res.msg);
              resolve({
                data: [],
                count: 0,
              });
            }
          })
          .catch((err) => {
            resolve({
              data: [],
              count: 0,
            });
          });
      });
    },
    updateBackState(param) {
      // 刷新
      this.show = false;
      if (param.refresh) {
        setTimeout(() => {
          this.handleReferList();
        }, 300);
      }
    },
    handleReferList() {
      this.show = true;
      let mescroll = this.getMescroll(0);
      mescroll && mescroll.triggerDownScroll();
    },
		tabChange(n) {
			this.show = true;
			this.currentTab = n;
			this.serachForm.isWithdraw = this.currentTab;
			// // TODO 是否需要滚动到top
			this.$refs.mescrollItem0.listDatas = [];
			this.getMescroll(0).triggerDownScroll();
		},
		handlerLicnDate(d) {
			this.serachForm.applyDateStart = d.startDate;
			this.serachForm.applyDateEnd = d.endDate;
			this.applyDate = d.startDate + "至" + d.endDate;
			// this.$refs["mescrollItem0"].refresh();
		},
		
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 0;
}
.content {
  background: #f5f5f5;
}
.cearch_title {
  background-color: #f3f4f5;
  width: 100%;
  height: 82rpx;
  font-size: 32rpx;
  font-weight: 600;
  padding: 22rpx 0 21rpx 32rpx;
  z-index: 999;
  position: fixed;
}
.tab-content-lay {
		// background-color: #fff;
		position: fixed;
		// #ifndef H5-DINGDING
		top: 44px;
		// #endif
		// #ifdef H5-DINGDING
		top: 0px;
		// #endif
		z-index: 999;
		width: 100%;
		overflow: hidden;
		background-color: #ffffff;
		border-bottom: 1px solid $u-border-color;
	}
	
</style>
